<template>
    <v-container fluid>
        <v-container fluid>
            <h4 class="mb-3">常见问题</h4>

            <v-row align="center">
                <v-col :md="2" :sm="6">
                    <AutocompleteOrgCity v-model="queryOrg" item-key="org_code"></AutocompleteOrgCity>
                </v-col>
                <v-col :md="2" :sm="6">
                    <v-text-field label="问题名称" v-model="queryName" ></v-text-field>
                </v-col>
                <v-col :md="2" :sm="6">
                    <v-select :items="nationalItem"  clearable v-model="queryNational" label="是否全国"> </v-select>
                </v-col>
                <v-col :md="4" :sm="6">
                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="query()"
                    >查询
                    </v-btn>

                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="reset()"
                    >重置
                    </v-btn>

                    <v-btn
                        color="primary"
                        dark
                        class="mb-2 mr-2"
                        v-if="is_supper || is_manager"
                        @click="create()"
                    >新增
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>

        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            class="elevation-1"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
        >
            <template v-slot:[`item.is_national`]="{ item }">
                <div v-if="item.is_national == 1">
                    全国
                </div>
                <div v-if="item.is_national == 2">
                    城市
                </div>
            </template>

            <template v-slot:[`item.actions`]="{ item, index }">
                <v-btn v-if="is_supper || is_manager" small depressed @click="edit(item, index)">编辑</v-btn>
                <v-btn v-if="is_supper || is_manager" small depressed  @click="deleteItem(item)">删除</v-btn>
            </template>
        </v-data-table>
        <v-row v-if="items.length > 0 && totalPage >= 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>

        <v-dialog
            v-model="dialog"
            persistent
            max-width="600px"
        >
            <v-form ref="form">
                <v-card>
                    <v-card-title>
                        <span class="text-h5" v-if="selectedItem && selectedItem.id" >编辑问题</span>
                        <span class="text-h5" v-else >新增问题</span>
                    </v-card-title>
                    <v-card-text>
                        <v-row>
                            <v-col cols="6">
                                <AutocompleteOrgCity :rules="[rules.required]" v-model="selectedItem.org_code"></AutocompleteOrgCity>
                            </v-col>
                            <v-col cols="6" >
                                <v-select :items="nationalItem"  v-model="selectedItem.is_national" :rules="[rules.required]" label="是否全国"> </v-select>
                            </v-col>
                            <v-col cols="12" >
                                <v-text-field
                                    label="问题标题"
                                    :rules="[rules.required, rules.size]"
                                    v-model="selectedItem.name"
                                ></v-text-field>
                            </v-col>
                            <v-col cols="12" >
                                <v-text-field
                                    v-model="selectedItem.content"
                                    label="问题内容"
                                    placeholder="请输入内容"
                                    outlined
                                    class="overflow-wrap"
                                ></v-text-field>
                            </v-col>

                        </v-row>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn  depressed   @click="dialog = false" :disabled="saving">
                            关闭
                        </v-btn>
                        <v-btn   depressed  color="primary" dark  @click="save()" :loading="saving">
                            确定
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-form>
        </v-dialog>

        <v-dialog v-model="dialogDelete" max-width="400px">
            <v-card v-if="itemToDelete">
                <v-card-title class="text-h5">删除 {{itemToDelete.name}}?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn depressed @click="dialogDelete = false">取消</v-btn>
                    <v-btn depressed color="error" @click="confirmDelete" :loading="deleting">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>

    </v-container>
</template>

<script>
import axios from "axios";
import AutocompleteOrgCity from "../../../widgets/AutocompleteOrgCity.vue";
import { mapGetters } from 'vuex';
import ImageUpload from "../../../widgets/ImageUpload.vue";

export default {
    components: {
        ImageUpload,
        AutocompleteOrgCity: AutocompleteOrgCity,
    },
    data: () => ({
        headers: [
            { text: '问题名称', value: 'name' },
            { text: '类型', value: 'is_national' },
            { text: '所属城市', value: 'city.name' },
            { text: '加入时间', value: 'created_at' },
            { text: '操作', value: 'actions', sortable: false },
        ],
        nationalItem: [
            { value: 1, text: '全国' },
            { value: 2, text: '城市' },
        ],
        items: [],
        pageNo: 1,
        pageSize: 20,
        totalPage: 0,

        queryOrg: null,
        queryName: null,
        queryNational: null,
        selectedItem: {},
        rules: {
            required: value => !!value || '必填',
            size: v => (v && v.length >= 2) || '最少2个字符',
            positive: v => (v &&  /^([1-9][0-9]*)$/.test(v) ) || '必须大于0的正整数',
        },
        dialog: false,
        saving: false,
        dialogDelete: false,
        deleting: false,
        itemToDelete: null
    }),
    computed: {
        ...mapGetters([
            'is_supper',
            'is_manager'
        ]),
    },
    created() {
        this.loadList();
    },
    methods: {
        deleteItem(item) {
            this.itemToDelete = item;
            this.dialogDelete = true;
        },
        confirmDelete() {
            this.deleting = true;
            const that = this;
            axios.delete(`website/qa/${this.itemToDelete.id}`).then((response) => {
                if (response.data.code == 0) {
                    this.loadList();
                    this.dialogDelete = false;
                    this.itemToDelete = null;
                }

                this.$toast.open({
                    message: response.data.msg,
                    type: response.data.code == 0 ? 'success' : 'error',
                    position: 'top-right',
                });
            })
                .catch(function () {})
                .then(function () {
                    that.deleting = false;
                });
        },
        loadList() {
            this.loading = true;
            const that = this;
            const params = Object.entries({
                pageSize: this.pageSize,
                page: this.pageNo,
                name: this.queryName ? this.queryName.name : '',
                org_code: this.queryOrg ? this.queryOrg.org_code : '',
                is_national: this.queryNational ? this.queryNational : null,
            }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
            axios.get(`website/qa`, {
                params: params
            }).then((response) => {
                if(response.data.data.length >= 0) {
                    this.items = response.data.data;
                    this.totalPage = response.data.last_page;
                }
            })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
        save() {
            if (!this.$refs.form.validate()) {
                return;
            }
            let url = 'website/qa';
            if (this.selectedItem && this.selectedItem.id) {
                url = `website/qa/${this.selectedItem.id}`;
            }
            const that = this;
            that.saving = true;
            axios.post(url, { ...this.selectedItem}).then((response) => {
                if (response.data.code == 0) {
                    this.loadList();
                    that.dialog = false;
                }

                this.$toast.open({
                    message: response.data.msg,
                    type: response.data.code == 0 ? 'success' : 'error',
                    position: 'top-right',
                });
            }).catch(function () {})
                .then(function () {

                    that.saving = false;
                });
        },
        onPageChange() {
            this.loadList();
        },
        query() {
            this.pageNo = 1;
            this.loadList();
        },
        reset() {
            this.queryName = null;
            this.queryMobile = null;
            this.queryOrg = null;
            this.queryKyc = null;
            this.pageNo = 1;
            this.loadList();
        },
        edit(item, index) {
            this.dialog = true;
            this.selectedItem = JSON.parse(JSON.stringify(item));
            this.userImage = this.selectedItem.url
        },
        create() {
            this.dialog = true;
            this.selectedItem = {};
        },
    }
}
</script>
<style scoped>
/* 使用CSS样式使文本在文本域内自动换行 */
.overflow-wrap .v-input__control {
    overflow-wrap: break-word;
}
</style>
